<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Hexo Theme Redefine">
    
    <meta name="author" content="星纪">
    <!-- preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    
    <!--- Seo Part-->
    
    <link rel="canonical" href="http://example.com/2024/01/21/day02_ajax综合案例/"/>
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <meta name="revisit-after" content="1 days">
    
        <meta name="description" content="Day02_AJAX综合案例知识点自测 以下代码运行结果是什么？（考察扩展运算符的使用） 12345678const result &#x3D; &amp;#123;  name: &amp;#x27;老李&amp;#x27;,  age: 18&amp;#125;const obj &#x3D; &amp;#123;  ...result&amp;#125;console.log(obj.age)  A：报错 B：18  答案  B正确      什么是事件委托">
<meta property="og:type" content="article">
<meta property="og:title" content="Ajax综合案例">
<meta property="og:url" content="http://example.com/2024/01/21/Day02_AJAX%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B/index.html">
<meta property="og:site_name" content="星纪">
<meta property="og:description" content="Day02_AJAX综合案例知识点自测 以下代码运行结果是什么？（考察扩展运算符的使用） 12345678const result &#x3D; &amp;#123;  name: &amp;#x27;老李&amp;#x27;,  age: 18&amp;#125;const obj &#x3D; &amp;#123;  ...result&amp;#125;console.log(obj.age)  A：报错 B：18  答案  B正确      什么是事件委托">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404105414757.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404105421707.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404105801739.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404105858660.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404110038828.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404110943200.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404110953752.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111014560.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111235862.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111251254.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111343653.png">
<meta property="og:image" content="http://example.com/images/image-20230404111530311.png">
<meta property="og:image" content="http://example.com/images/image-20230404111546639.png">
<meta property="og:image" content="http://example.com/images/image-20230404111612125.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111722254.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111739153.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111756655.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404111941722.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404112942935.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404113338815.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404113702515.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404122349505.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404123206073.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404123708765.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404124524401.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404124540629.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404125310049.png">
<meta property="og:image" content="http://example.com/images/Ajax-2/image-20230404125517679.png">
<meta property="article:published_time" content="2024-01-21T11:33:33.000Z">
<meta property="article:modified_time" content="2024-01-24T07:03:00.704Z">
<meta property="article:author" content="John">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/images/Ajax-2/image-20230404105414757.png">
    
    
    <!--- Icon Part-->
    <link rel="icon" type="image/png" href="/images/redefine-favicon.svg" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/redefine-favicon.svg">
    <meta name="theme-color" content="#A31F34">
    <link rel="shortcut icon" href="/images/redefine-favicon.svg">
    <!--- Page Info-->
    
    <title>
        
            Ajax综合案例 -
        
        星纪
    </title>

    
<link rel="stylesheet" href="/fonts/Chillax/chillax.css">


    
        <style>
    :root {
        --preloader-background-color: #fff;
        --preloader-text-color: #000;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --preloader-background-color: #202124;
            --preloader-text-color: #fff;
        }
    }

    @media (prefers-color-scheme: light) {
        :root {
            --preloader-background-color: #fff;
            --preloader-text-color: #000;
        }
    }

    @media (max-width: 600px) {
        .ml13 {
            font-size: 2.6rem !important; /* Adjust this value as needed */
        }
    }

    .preloader {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Tailwind 'gap-4' is 1rem */
        align-items: center;
        justify-content: center;
        position: fixed;
        padding: 12px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100vh; /* 'h-screen' is 100% of the viewport height */
        background-color: var(--preloader-background-color);
        z-index: 1100; /* 'z-[1100]' sets the z-index */
        transition: opacity 0.2s ease-in-out;
    }

    .ml13 {
        font-size: 3.2rem;
        /* text-transform: uppercase; */
        color: var(--preloader-text-color);
        letter-spacing: -1px;
        font-weight: 500;
        font-family: 'Chillax-Variable', sans-serif;
        text-align: center;
    }

    .ml13 .word {
        display: inline-flex;
        flex-wrap: wrap;
        white-space: nowrap;
    }

    .ml13 .letter {
        display: inline-block;
        line-height: 1em;
    }
</style>

<div class="preloader">
    
<script src="/js/libs/anime.min.js"></script>

    <h1 class="ml13">
        星纪
    </h1>
    <script>
        var textWrapper = document.querySelector('.ml13');
        // Split text into words
        var words = textWrapper.textContent.trim().split(' ');

        // Clear the existing content
        textWrapper.innerHTML = '';

        // Wrap each word and its letters in spans
        words.forEach(function(word) {
            var wordSpan = document.createElement('span');
            wordSpan.classList.add('word');
            wordSpan.innerHTML = word.replace(/\S/g, "<span class='letter'>$&</span>");
            textWrapper.appendChild(wordSpan);
            textWrapper.appendChild(document.createTextNode(' ')); // Add space between words
        });


        anime.timeline({loop: true})
            .add({
                targets: '.ml13 .letter',
                translateY: [100,0],
                translateZ: 0,
                opacity: [0,1],
                easing: "easeOutExpo",
                duration: 1400,
                delay: (el, i) => 300 + 30 * i
            }).add({
            targets: '.ml13 .letter',
            translateY: [0,-100],
            opacity: [1,0],
            easing: "easeInExpo",
            duration: 1200,
            delay: (el, i) => 100 + 30 * i
        });

        let themeStatus = JSON.parse(localStorage.getItem('REDEFINE-THEME-STATUS'))?.isDark;

        // If the theme status is not found in local storage, check the preferred color scheme
        if (themeStatus === undefined || themeStatus === null) {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                themeStatus = 'dark';
            } else {
                themeStatus = 'light';
            }
        }

        // Now you can use the themeStatus variable in your code
        if (themeStatus) {
            document.documentElement.style.setProperty('--preloader-background-color', '#202124');
            document.documentElement.style.setProperty('--preloader-text-color', '#fff');
        } else {
            document.documentElement.style.setProperty('--preloader-background-color', '#fff');
            document.documentElement.style.setProperty('--preloader-text-color', '#000');
        }

        window.addEventListener('load', function () {
            hidePreloaderAfterTimeout(1000); // Hide after 1000 milliseconds once the window has loaded
        });

        // Backup failsafe: Hide preloader after a maximum of 5000 milliseconds, regardless of the window load event
        hidePreloaderAfterTimeout(5000);

        function hidePreloaderAfterTimeout(delay) {
            setTimeout(function () {
                var preloader = document.querySelector('.preloader');
                preloader.style.opacity = '0';
                setTimeout(function () {
                    preloader.style.display = 'none';
                }, 200);
            }, delay);
        }
    </script>
</div>
    

    
<link rel="stylesheet" href="/css/style.css">


    
        
<link rel="stylesheet" href="/assets/build/styles.css">

    

    
<link rel="stylesheet" href="/fonts/fonts.css">

    
<link rel="stylesheet" href="/fonts/Satoshi/satoshi.css">

    <!--- Font Part-->
    
    
    
    

    <!--- Inject Part-->
    
    <script id="hexo-configurations">
    window.config = {"hostname":"example.com","root":"/","language":"en"};
    window.theme = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true,"title_alignment":"left"},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[]},"code_block":{"copy":true,"style":"mac","font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":{"enable":true,"default":"cc_by_nc_sa"},"lazyload":true,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"mobile_limit":2,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]}},"colors":{"primary":"#A31F34","secondary":null},"global":{"fonts":{"chinese":{"enable":false,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"website_counter":{"url":"https://cn.vercount.one/js","enable":true,"site_pv":true,"site_uv":true,"post_pv":true},"single_page":true,"preloader":true,"open_graph":true,"google_analytics":{"enable":false,"id":null}},"home_banner":{"enable":true,"style":"fixed","image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"星纪","subtitle":{"text":[],"hitokoto":{"enable":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.8rem","subtitle_size":"1.5rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":false,"links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":null},"qrs":{"weixin":null}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"fixed","audios":[{"name":null,"artist":null,"url":null,"cover":null}]},"mermaid":{"enable":false,"version":"9.3.0"}},"version":"2.6.0","navbar":{"auto_hide":false,"color":{"left":"#f78736","right":"#367df7","transparency":35},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"links":null},"article_date_format":"auto","categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}},"footerStart":"2022/8/17 11:45:14"};
    window.lang_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
    window.data = {"masonry":false};
  </script>
    
    <!--- Fontawesome Part-->
    
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">

    
<link rel="stylesheet" href="/fontawesome/brands.min.css">

    
<link rel="stylesheet" href="/fontawesome/solid.min.css">

    
<link rel="stylesheet" href="/fontawesome/regular.min.css">

    
    
    
    
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
        <span class="pjax-progress-bar"></span>
<!--        <span class="swup-progress-icon">-->
<!--            <i class="fa-solid fa-circle-notch fa-spin"></i>-->
<!--        </span>-->
    
</div>


<main class="page-container" id="swup">

    

    <div class="main-content-container">


        <div class="main-content-header">
            <header class="navbar-container">

    <div class="navbar-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                
                星纪
                
            </a>
        </div>

        <div class="right">
            <!-- PC -->
            <div class="desktop">
                <ul class="navbar-list">
                    
                        
                            

                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class=""
                                   href="/"
                                        >
                                    <i class="fa-regular fa-house fa-fw"></i>
                                    HOME
                                    
                                </a>

                                <!-- Submenu -->
                                
                            </li>
                    
                    
                </ul>
            </div>
            <!-- Mobile -->
            <div class="mobile">
                
                <div class="icon-item navbar-bar">
                    <div class="navbar-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile drawer -->
    <div class="navbar-drawer h-screen w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
        <ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
            
                
                    

                    <li class="drawer-navbar-item text-base my-1.5 flex flex-col w-full">
                        
                        <a class="py-1.5 px-2 flex flex-row items-center justify-between gap-1 hover:!text-primary active:!text-primary text-2xl font-semibold group border-b border-border-color hover:border-primary w-full "
                           href="/"
                        >
                            <span>
                                HOME
                            </span>
                            
                                <i class="fa-regular fa-house fa-sm fa-fw"></i>
                            
                        </a>
                        

                        
                    </li>
            
        </ul>

        <div class="statistics flex justify-around my-2.5">
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/tags">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
        <div class="label text-third-text-color text-sm">Tags</div>
    </a>
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/categories">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">0</div>
        <div class="label text-third-text-color text-sm">Categories</div>
    </a>
    <a class="item tag-count-item flex flex-col justify-center items-center w-20" href="/archives">
        <div class="number text-2xl sm:text-xl text-second-text-color font-semibold">9</div>
        <div class="label text-third-text-color text-sm">Posts</div>
    </a>
</div>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="main-content-body">

            

            <div class="main-content">

                
                    <div class="post-page-container flex relative justify-between box-border w-full h-full">
    <div class="article-content-container">

        <div class="article-title relative w-full">
            
                <div class="w-full flex items-center pt-6 justify-start">
                    <h1 class="article-title-regular text-second-text-color text-4xl md:text-6xl font-bold px-2 sm:px-6 md:px-8 py-3">Ajax综合案例</h1>
                </div>
            
            </div>

        
            <div class="article-header flex flex-row gap-2 items-center px-2 sm:px-6 md:px-8">
                <div class="avatar w-[46px] h-[46px] flex-shrink-0 rounded-medium border border-border-color p-[1px]">
                    <img src="/images/redefine-avatar.svg">
                </div>
                <div class="info flex flex-col justify-between">
                    <div class="author flex items-center">
                        <span class="name text-default-text-color text-lg font-semibold">星纪</span>
                        
                            <span class="author-label ml-1.5 text-xs px-2 py-0.5 rounded-small text-third-text-color border border-shadow-color-1">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fa-regular fa-pen-fancy"></i>&nbsp;
        <span class="desktop">2024-01-21 19:33:33</span>
        <span class="mobile">2024-01-21 19:33:33</span>
        <span class="hover-info">Created</span>
    </span>
    
        <span class="article-date article-meta-item">
            <i class="fa-regular fa-wrench"></i>&nbsp;
            <span class="desktop">2024-01-24 15:03</span>
            <span class="mobile">2024-01-24 15:03</span>
            <span class="hover-info">Updated</span>
        </span>
    

    
    

    
    
    
    
        <span class="article-pv article-meta-item">
            <i class="fa-regular fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        


        <div class="article-content markdown-body px-2 sm:px-6 md:px-8 pb-8">
            <h1 id="Day02-AJAX综合案例"><a href="#Day02-AJAX综合案例" class="headerlink" title="Day02_AJAX综合案例"></a>Day02_AJAX综合案例</h1><h2 id="知识点自测"><a href="#知识点自测" class="headerlink" title="知识点自测"></a>知识点自测</h2><ol>
<li><p>以下代码运行结果是什么？（考察扩展运算符的使用）</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> result = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;老李&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  ...result</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj.<span class="property">age</span>)</span><br></pre></td></tr></table></figure></div>

<p>A：报错</p>
<p>B：18</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details>


</li>
<li><p>什么是事件委托？</p>
<p>A：只能把单击事件委托给父元素绑定</p>
<p>B：可以把能冒泡的事件，委托给已存在的向上的任意标签元素绑定</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details>


</li>
<li><p>事件对象e.target作用是什么?</p>
<p>A：获取到这次触发事件相关的信息</p>
<p>B：获取到这次触发事件目标标签元素</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details>


</li>
<li><p>如果获取绑定在标签上自定义属性的值10？</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">data-code</span>=<span class="string">&quot;10&quot;</span>&gt;</span>西游记<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></div>

<p>A：div标签对象.innerHTML</p>
<p>B：div标签对象.dataset.code</p>
<p>C：div标签对象.code</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details>


</li>
<li><p>哪个方法可以判断目标标签是否包含指定的类名?</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;my-div title info&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></div>

<p>A: div标签对象.className &#x3D;&#x3D;&#x3D; ‘title’</p>
<p>B: div标签对象.classList.contains(‘title’)</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details>


</li>
<li><p>伪数组取值哪种方式是正确的?</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123; <span class="number">0</span>: <span class="string">&#x27;老李&#x27;</span>, <span class="number">1</span>: <span class="string">&#x27;老刘&#x27;</span> &#125;</span><br></pre></td></tr></table></figure></div>

<p>A: obj.0</p>
<p>B: obj[0]</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details>


</li>
<li><p>以下哪个选项可以，往本地存储键为‘bgImg’，值为图片url网址的代码</p>
<p>A：localStorage.setItem(‘bgImg’)</p>
<p>B：localStorage.getItem(‘bgImg’)</p>
<p>C：localStorage.setItem(‘bgImg’, ‘图片url网址’)</p>
<p>D：localStorage.getItem(‘bgImg’, ‘图片url网址’)</p>
<details>
<summary>答案</summary>
<ul>
<li>C正确</li>
</ul>
</details>


</li>
<li><p>以下代码运行结果是？</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  <span class="attr">username</span>: <span class="string">&#x27;老李&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">  <span class="attr">sex</span>: <span class="string">&#x27;男&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(obj)</span><br></pre></td></tr></table></figure></div>

<p>A：代码报错</p>
<p>B：[username, age, sex]</p>
<p>C：[“username”, “age”, “sex”]</p>
<p>D：[“老李”, 18, “男”]</p>
<details>
<summary>答案</summary>
<ul>
<li>C正确</li>
</ul>
</details>


</li>
<li><p>下面哪个选项可以把数字字符串转成数字类型？</p>
<p>A：+’10‘</p>
<p>B：’10‘ + 0</p>
<details>
<summary>答案</summary>
<ul>
<li>A正确</li>
</ul>
</details>


</li>
<li><p>以下代码运行后的结果是什么？（考察逻辑与的短路特性）</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> age = <span class="number">18</span></span><br><span class="line"><span class="keyword">const</span> result1 = (age || <span class="string">&#x27;有年龄&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> sex = <span class="string">&#x27;&#x27;</span></span><br><span class="line"><span class="keyword">const</span> result2 = sex || <span class="string">&#x27;没有性别&#x27;</span></span><br></pre></td></tr></table></figure></div>

<p>A：报错，报错</p>
<p>B：18，没有性别</p>
<p>C：有年龄，没有性别</p>
<p>D：18，’‘</p>
<details>
<summary>答案</summary>
<ul>
<li>B正确</li>
</ul>
</details></li>
</ol>
<h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><ul>
<li>案例-图书管理</li>
<li>图片上传</li>
<li>案例-网站换肤</li>
<li>案例-个人信息设置</li>
</ul>
<h2 id="学习目标"><a href="#学习目标" class="headerlink" title="学习目标"></a>学习目标</h2><blockquote>
<p>今天主要就是练，巩固 axios 的使用</p>
</blockquote>
<ol>
<li>完成案例-图书管理系统（增删改查）经典业务</li>
<li>掌握图片上传的思路</li>
<li>完成案例-网站换肤并实现图片地址缓存</li>
<li>完成案例-个人信息设置</li>
</ol>
<h2 id="01-案例-图书管理-介绍"><a href="#01-案例-图书管理-介绍" class="headerlink" title="01.案例_图书管理-介绍"></a>01.案例_图书管理-介绍</h2><h3 id="目标"><a href="#目标" class="headerlink" title="目标"></a>目标</h3><p>案例-图书管理-介绍（介绍要完成的效果和练习到的思维）</p>
<h3 id="讲解"><a href="#讲解" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>打开备课代码运行图书管理案例效果-介绍要完成的增删改查业务效果和 Bootstrap 弹框使用</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404105414757.png"
                      alt="image-20230404105414757"
                ></p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404105421707.png"
                      alt="image-20230404105421707"
                ></p>
</li>
<li><p>分析步骤和对应的视频模块</p>
<ul>
<li>先学习 Bootstrap 弹框的使用（因为添加图书和编辑图书需要这个窗口来承载图书表单）</li>
<li>先做渲染图书列表（这样做添加和编辑以及删除可以看到数据变化，所以先做渲染）</li>
<li>再做新增图书功能</li>
<li>再做删除图书功能</li>
<li>再做编辑图书功能（注意：编辑和新增图书是2套弹框-后续做项目我们再用同1个弹框）</li>
</ul>
</li>
</ol>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>做完这个案例我们将会有什么收获呢?</p>
<details>
<summary>答案</summary>
<ul>
<li>掌握前端经典增删改查的业务和思路，对以后开发很有帮助</li>
</ul>
</details></li>
</ol>
<h2 id="02-Bootstrap-弹框-属性控制"><a href="#02-Bootstrap-弹框-属性控制" class="headerlink" title="02.Bootstrap 弹框_属性控制"></a>02.Bootstrap 弹框_属性控制</h2><h3 id="目标-1"><a href="#目标-1" class="headerlink" title="目标"></a>目标</h3><p>使用属性方式控制 Bootstarp 弹框的显示和隐藏</p>
<h3 id="讲解-1"><a href="#讲解-1" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>什么是 Bootstrap 弹框？</p>
<ul>
<li><p>不离开当前页面，显示单独内容，供用户操作</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404105801739.png"
                      alt="image-20230404105801739"
                ></p>
</li>
</ul>
</li>
<li><p>需求：使用 Bootstrap 弹框，先做个简单效果，点击按钮，让弹框出现，点击 X 和 Close 让弹框隐藏</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404105858660.png"
                      alt="image-20230404105858660"
                ></p>
</li>
<li><p>如何使用 Bootstrap 弹框呢？</p>
<ol>
<li><p>先引入 bootstrap.css 和 bootstrap.js 到自己网页中</p>
</li>
<li><p>准备弹框标签，确认结构（可以从 Bootstrap 官方文档的 Modal 里复制基础例子）- 运行到网页后，逐一对应标签和弹框每个部分对应关系</p>
</li>
<li><p>通过自定义属性，通知弹框的显示和隐藏，语法如下：</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">data-bs-toggle</span>=<span class="string">&quot;modal&quot;</span> <span class="attr">data-bs-target</span>=<span class="string">&quot;css选择器&quot;</span>&gt;</span></span><br><span class="line">  显示弹框</span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">data-bs-dismiss</span>=<span class="string">&quot;modal&quot;</span>&gt;</span>Close<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure></div></li>
</ol>
</li>
<li><p>去代码区实现一下</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Bootstrap 弹框<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 引入bootstrap.css --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    目标：使用Bootstrap弹框</span></span><br><span class="line"><span class="comment">    1. 引入bootstrap.css 和 bootstrap.js</span></span><br><span class="line"><span class="comment">    2. 准备弹框标签，确认结构</span></span><br><span class="line"><span class="comment">    3. 通过自定义属性，控制弹框的显示和隐藏</span></span><br><span class="line"><span class="comment">   --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-primary&quot;</span> <span class="attr">data-bs-toggle</span>=<span class="string">&quot;modal&quot;</span> <span class="attr">data-bs-target</span>=<span class="string">&quot;.my-box&quot;</span>&gt;</span></span><br><span class="line">    显示弹框</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    弹框标签</span></span><br><span class="line"><span class="comment">    bootstrap的modal弹框，添加modal类名（默认隐藏）</span></span><br><span class="line"><span class="comment">   --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal my-box&quot;</span> <span class="attr">tabindex</span>=<span class="string">&quot;-1&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal-dialog&quot;</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 弹框-内容 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal-content&quot;</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 弹框-头部 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal-header&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">h5</span> <span class="attr">class</span>=<span class="string">&quot;modal-title&quot;</span>&gt;</span>Modal title<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn-close&quot;</span> <span class="attr">data-bs-dismiss</span>=<span class="string">&quot;modal&quot;</span> <span class="attr">aria-label</span>=<span class="string">&quot;Close&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 弹框-身体 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal-body&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">p</span>&gt;</span>Modal body text goes here.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 弹框-底部 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;modal-footer&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-secondary&quot;</span> <span class="attr">data-bs-dismiss</span>=<span class="string">&quot;modal&quot;</span>&gt;</span>Close<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-primary&quot;</span>&gt;</span>Save changes<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 引入bootstrap.js --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>用哪个属性绑定来控制弹框显示呢?</p>
<details>
<summary>答案</summary>
<ul>
<li>data-bs-toggle和data-bs-target</li>
</ul>
</details>
</li>
<li><p>用哪个属性来控制隐藏弹框呢？</p>
<details>
<summary>答案</summary>
<ul>
<li>data-bs-dismiss 关闭的是标签所在的当前提示框</li>
</ul>
</details></li>
</ol>
<h2 id="03-Bootstrap-弹框-JS控制"><a href="#03-Bootstrap-弹框-JS控制" class="headerlink" title="03.Bootstrap 弹框_JS控制"></a>03.Bootstrap 弹框_JS控制</h2><h3 id="目标-2"><a href="#目标-2" class="headerlink" title="目标"></a>目标</h3><p>使用 JS 方式控制 Bootstarp 弹框的显示和隐藏</p>
<h3 id="讲解-2"><a href="#讲解-2" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>为什么需要 JS 方式控制呢？</p>
<ul>
<li><p>当我显示之前，隐藏之前，需要执行一些 JS 逻辑代码，就需要引入 JS 控制弹框显示&#x2F;隐藏的方式了</p>
</li>
<li><p>例如：</p>
<ul>
<li>点击编辑姓名按钮，在弹框显示之前，在输入框填入默认姓名</li>
<li>点击保存按钮，在弹框隐藏之前，获取用户填入的名字并打印</li>
</ul>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404110038828.png"
                      alt="image-20230404110038828"
                ></p>
</li>
</ul>
</li>
<li><p>所以在现实和隐藏之前，需要执行 JS 代码逻辑，就使用 JS 方式 控制 Bootstrap 弹框显示和隐藏</p>
<p>语法如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建弹框对象</span></span><br><span class="line"><span class="keyword">const</span> modalDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;css选择器&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> modal = <span class="keyword">new</span> bootstrap.<span class="title class_">Modal</span>(modelDom)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 显示弹框</span></span><br><span class="line">modal.<span class="title function_">show</span>()</span><br><span class="line"><span class="comment">// 隐藏弹框</span></span><br><span class="line">modal.<span class="title function_">hide</span>()</span><br></pre></td></tr></table></figure></div>


</li>
<li><p>去代码区实现一下</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 创建弹框对象</span></span><br><span class="line"><span class="keyword">const</span> modalDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.name-box&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> modal = <span class="keyword">new</span> bootstrap.<span class="title class_">Modal</span>(modalDom)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编辑姓名-&gt;点击-&gt;赋予默认姓名-&gt;弹框显示</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.username&#x27;</span>).<span class="property">value</span> = <span class="string">&#x27;默认姓名&#x27;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 2. 显示弹框</span></span><br><span class="line">  modal.<span class="title function_">show</span>()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 保存-&gt;点击-&gt;-&gt;获取姓名打印-&gt;弹框隐藏</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.save-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> username = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.username&#x27;</span>).<span class="property">value</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;模拟把姓名保存到服务器上&#x27;</span>, username)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 2. 隐藏弹框</span></span><br><span class="line">  modal.<span class="title function_">hide</span>()</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-2"><a href="#小结-2" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>什么时候用属性控制，什么时候用 JS 控制 Bootstrap 弹框的显示&#x2F;隐藏?</p>
<details>
<summary>答案</summary>
<ul>
<li>直接出现/隐藏用属性方式控制，如果需要先执行一段 JS 逻辑再显示/隐藏就用 JS 方式控制</li>
</ul>
</details></li>
</ol>
<h2 id="04-案例-图书管理-渲染列表"><a href="#04-案例-图书管理-渲染列表" class="headerlink" title="04.案例_图书管理_渲染列表"></a>04.案例_图书管理_渲染列表</h2><h3 id="目标-3"><a href="#目标-3" class="headerlink" title="目标"></a>目标</h3><p>完成图书管理案例-图书列表数据渲染效果</p>
<h3 id="讲解-3"><a href="#讲解-3" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：基于 axios 获取到图书列表数据，并用 JS 代码渲染数据，到准备好的模板标签中</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404110943200.png"
                      alt="image-20230404110943200"
                ></p>
</li>
<li><p>步骤：</p>
<ol>
<li><p>获取数据</p>
</li>
<li><p>渲染数据</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404110953752.png"
                      alt="image-20230404110953752"
                ></p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111014560.png"
                      alt="image-20230404111014560"
                ></p>
</li>
</ol>
</li>
<li><p>获取数据的时候，需要给自己起一个外号，为什么需要给自己起一个外号呢？</p>
<ul>
<li>我们所有人数据都来自同一个服务器上，为了区分每个同学不同的数据，需要大家设置一个外号告诉服务器，服务器就会返回你对应的图书数据了</li>
</ul>
</li>
<li><p>核心代码如下：</p>
<blockquote>
<p>因为默认展示列表，新增，修改，删除后都要重新获取并刷新列表，所以把获取数据渲染数据的代码封装在一个函数内，方便复用</p>
</blockquote>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标1：渲染图书列表</span></span><br><span class="line"><span class="comment"> *  1.1 获取数据</span></span><br><span class="line"><span class="comment"> *  1.2 渲染数据</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> creator = <span class="string">&#x27;老张&#x27;</span></span><br><span class="line"><span class="comment">// 封装-获取并渲染图书列表函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getBooksList</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 1.1 获取数据</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/books&#x27;</span>,</span><br><span class="line">    <span class="attr">params</span>: &#123;</span><br><span class="line">      <span class="comment">// 外号：获取对应数据</span></span><br><span class="line">      creator</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(result)</span></span><br><span class="line">    <span class="keyword">const</span> bookList = result.<span class="property">data</span>.<span class="property">data</span></span><br><span class="line">    <span class="comment">// console.log(bookList)</span></span><br><span class="line">    <span class="comment">// 1.2 渲染数据</span></span><br><span class="line">    <span class="keyword">const</span> htmlStr = bookList.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="string">`&lt;tr&gt;</span></span><br><span class="line"><span class="string">      &lt;td&gt;<span class="subst">$&#123;index + <span class="number">1</span>&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">      &lt;td&gt;<span class="subst">$&#123;item.bookname&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">      &lt;td&gt;<span class="subst">$&#123;item.author&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">      &lt;td&gt;<span class="subst">$&#123;item.publisher&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">      &lt;td data-id=<span class="subst">$&#123;item.id&#125;</span>&gt;</span></span><br><span class="line"><span class="string">        &lt;span class=&quot;del&quot;&gt;删除&lt;/span&gt;</span></span><br><span class="line"><span class="string">        &lt;span class=&quot;edit&quot;&gt;编辑&lt;/span&gt;</span></span><br><span class="line"><span class="string">      &lt;/td&gt;</span></span><br><span class="line"><span class="string">    &lt;/tr&gt;`</span></span><br><span class="line">    &#125;).<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line">    <span class="comment">// console.log(htmlStr)</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.list&#x27;</span>).<span class="property">innerHTML</span> = htmlStr</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 网页加载运行，获取并渲染列表一次</span></span><br><span class="line"><span class="title function_">getBooksList</span>()</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-3"><a href="#小结-3" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>渲染数据列表的2个步骤是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>获取数据，分析结构渲染到页面上</li>
</ul>
</details></li>
</ol>
<h2 id="05-案例-图书管理-新增图书"><a href="#05-案例-图书管理-新增图书" class="headerlink" title="05.案例_图书管理_新增图书"></a>05.案例_图书管理_新增图书</h2><h3 id="目标-4"><a href="#目标-4" class="headerlink" title="目标"></a>目标</h3><p>完成图书管理案例-新增图书需求</p>
<h3 id="讲解-4"><a href="#讲解-4" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：点击添加按钮，出现准备好的新增图书弹框，填写图书信息提交到服务器保存，并更新图书列表</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111235862.png"
                      alt="image-20230404111235862"
                ></p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111251254.png"
                      alt="image-20230404111251254"
                ></p>
</li>
<li><p>步骤：</p>
<ol>
<li><p>新增弹框（控制显示和隐藏）（基于 Bootstrap 弹框和准备好的表单-用属性和 JS 方式控制）</p>
</li>
<li><p>在点击保存按钮时，收集数据&amp;提交保存</p>
</li>
<li><p>刷新-图书列表）（重新调用下之前封装的获取并渲染列表的函数）</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111343653.png"
                      alt="image-20230404111343653"
                ></p>
</li>
</ol>
</li>
<li><p>核心代码如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标2：新增图书</span></span><br><span class="line"><span class="comment"> *  2.1 新增弹框-&gt;显示和隐藏</span></span><br><span class="line"><span class="comment"> *  2.2 收集表单数据，并提交到服务器保存</span></span><br><span class="line"><span class="comment"> *  2.3 刷新图书列表</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 2.1 创建弹框对象</span></span><br><span class="line"><span class="keyword">const</span> addModalDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.add-modal&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> addModal = <span class="keyword">new</span> bootstrap.<span class="title class_">Modal</span>(addModalDom)</span><br><span class="line"><span class="comment">// 保存按钮-&gt;点击-&gt;隐藏弹框</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.add-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 2.2 收集表单数据，并提交到服务器保存</span></span><br><span class="line">  <span class="keyword">const</span> addForm = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.add-form&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> bookObj = <span class="title function_">serialize</span>(addForm, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span> &#125;)</span><br><span class="line">  <span class="comment">// console.log(bookObj)</span></span><br><span class="line">  <span class="comment">// 提交到服务器</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/books&#x27;</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      ...bookObj,</span><br><span class="line">      creator</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// console.log(result)</span></span><br><span class="line">    <span class="comment">// 2.3 添加成功后，重新请求并渲染图书列表</span></span><br><span class="line">    <span class="title function_">getBooksList</span>()</span><br><span class="line">    <span class="comment">// 重置表单</span></span><br><span class="line">    addForm.<span class="title function_">reset</span>()</span><br><span class="line">    <span class="comment">// 隐藏弹框</span></span><br><span class="line">    addModal.<span class="title function_">hide</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-4"><a href="#小结-4" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>新增数据的3个步骤是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>准备好数据标签和样式，然后收集表单数据提交保存，刷新列表</li>
</ul>
</details></li>
</ol>
<h2 id="06-案例-图书管理-删除图书"><a href="#06-案例-图书管理-删除图书" class="headerlink" title="06.案例_图书管理_删除图书"></a>06.案例_图书管理_删除图书</h2><h3 id="目标-5"><a href="#目标-5" class="headerlink" title="目标"></a>目标</h3><p>完成图书管理案例-删除图书需求</p>
<h3 id="讲解-5"><a href="#讲解-5" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：点击图书删除元素，删除当前图书数据</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/image-20230404111530311.png"
                      alt="image-20230404111530311"
                ></p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/image-20230404111546639.png"
                      alt="image-20230404111546639"
                ></p>
</li>
<li><p>步骤：</p>
<ol>
<li><p>给删除元素，绑定点击事件（事件委托方式并判断点击的是删除元素才走删除逻辑代码），并获取到要删除的数据id</p>
</li>
<li><p>基于 axios 和接口文档，调用删除接口，让服务器删除这条数据</p>
</li>
<li><p>重新获取并刷新图书列表</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/images/image-20230404111612125.png"
                      alt="image-20230404111612125"
                ></p>
</li>
</ol>
</li>
<li><p>核心代码如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标3：删除图书</span></span><br><span class="line"><span class="comment"> *  3.1 删除元素绑定点击事件-&gt;获取图书id</span></span><br><span class="line"><span class="comment"> *  3.2 调用删除接口</span></span><br><span class="line"><span class="comment"> *  3.3 刷新图书列表</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 3.1 删除元素-&gt;点击（事件委托）</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.list&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 获取触发事件目标元素</span></span><br><span class="line">  <span class="comment">// console.log(e.target)</span></span><br><span class="line">  <span class="comment">// 判断点击的是删除元素</span></span><br><span class="line">  <span class="keyword">if</span> (e.<span class="property">target</span>.<span class="property">classList</span>.<span class="title function_">contains</span>(<span class="string">&#x27;del&#x27;</span>)) &#123;</span><br><span class="line">    <span class="comment">// console.log(&#x27;点击删除元素&#x27;)</span></span><br><span class="line">    <span class="comment">// 获取图书id（自定义属性id）</span></span><br><span class="line">    <span class="keyword">const</span> theId = e.<span class="property">target</span>.<span class="property">parentNode</span>.<span class="property">dataset</span>.<span class="property">id</span></span><br><span class="line">    <span class="comment">// console.log(theId)</span></span><br><span class="line">    <span class="comment">// 3.2 调用删除接口</span></span><br><span class="line">    <span class="title function_">axios</span>(&#123;</span><br><span class="line">      <span class="attr">url</span>: <span class="string">`http://hmajax.itheima.net/api/books/<span class="subst">$&#123;theId&#125;</span>`</span>,</span><br><span class="line">      <span class="attr">method</span>: <span class="string">&#x27;DELETE&#x27;</span></span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 3.3 刷新图书列表</span></span><br><span class="line">      <span class="title function_">getBooksList</span>()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-5"><a href="#小结-5" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>删除数据的步骤是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>告知服务器要删除的数据id，服务器删除后，重新获取并刷新列表</li>
</ul>
</details></li>
</ol>
<h2 id="07-09-案例-图书管理-编辑图书"><a href="#07-09-案例-图书管理-编辑图书" class="headerlink" title="07-09.案例_图书管理_编辑图书"></a>07-09.案例_图书管理_编辑图书</h2><h3 id="目标-6"><a href="#目标-6" class="headerlink" title="目标"></a>目标</h3><p>完成图书管理案例-编辑图书需求</p>
<h3 id="讲解-6"><a href="#讲解-6" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>因为编辑图书要做回显等，比较复杂，所以分了3个视频来讲解</p>
</li>
<li><p>需求：完成编辑图书回显当前图书数据到编辑表单，在用户点击修改按钮，收集数据提交到服务器保存，并刷新列表</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111722254.png"
                      alt="image-20230404111722254"
                ></p>
</li>
<li><p>编辑数据的核心思路：</p>
<ol>
<li><p>给编辑元素，绑定点击事件（事件委托方式并判断点击的是编辑元素才走编辑逻辑代码），并获取到要编辑的数据id</p>
</li>
<li><p>基于 axios 和接口文档，调用查询图书详情接口，获取正在编辑的图书数据，并回显到表单中（页面上的数据是在用户的浏览器中不够准备，所以只要是查看数据都要从服务器获取）</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111739153.png"
                      alt="image-20230404111739153"
                ></p>
</li>
<li><p>收集并提交保存修改数据，并重新从服务器获取列表刷新页面</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111756655.png"
                      alt="image-20230404111756655"
                ></p>
</li>
</ol>
</li>
<li><p>核心代码如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标4：编辑图书</span></span><br><span class="line"><span class="comment"> *  4.1 编辑弹框-&gt;显示和隐藏</span></span><br><span class="line"><span class="comment"> *  4.2 获取当前编辑图书数据-&gt;回显到编辑表单中</span></span><br><span class="line"><span class="comment"> *  4.3 提交保存修改，并刷新列表</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 4.1 编辑弹框-&gt;显示和隐藏</span></span><br><span class="line"><span class="keyword">const</span> editDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-modal&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> editModal = <span class="keyword">new</span> bootstrap.<span class="title class_">Modal</span>(editDom)</span><br><span class="line"><span class="comment">// 编辑元素-&gt;点击-&gt;弹框显示</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.list&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 判断点击的是否为编辑元素</span></span><br><span class="line">  <span class="keyword">if</span> (e.<span class="property">target</span>.<span class="property">classList</span>.<span class="title function_">contains</span>(<span class="string">&#x27;edit&#x27;</span>)) &#123;</span><br><span class="line">    <span class="comment">// 4.2 获取当前编辑图书数据-&gt;回显到编辑表单中</span></span><br><span class="line">    <span class="keyword">const</span> theId = e.<span class="property">target</span>.<span class="property">parentNode</span>.<span class="property">dataset</span>.<span class="property">id</span></span><br><span class="line">    <span class="title function_">axios</span>(&#123;</span><br><span class="line">      <span class="attr">url</span>: <span class="string">`http://hmajax.itheima.net/api/books/<span class="subst">$&#123;theId&#125;</span>`</span></span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> bookObj = result.<span class="property">data</span>.<span class="property">data</span></span><br><span class="line">      <span class="comment">// document.querySelector(&#x27;.edit-form .bookname&#x27;).value = bookObj.bookname</span></span><br><span class="line">      <span class="comment">// document.querySelector(&#x27;.edit-form .author&#x27;).value = bookObj.author</span></span><br><span class="line">      <span class="comment">// 数据对象“属性”和标签“类名”一致</span></span><br><span class="line">      <span class="comment">// 遍历数据对象，使用属性去获取对应的标签，快速赋值</span></span><br><span class="line">      <span class="keyword">const</span> keys = <span class="title class_">Object</span>.<span class="title function_">keys</span>(bookObj) <span class="comment">// [&#x27;id&#x27;, &#x27;bookname&#x27;, &#x27;author&#x27;, &#x27;publisher&#x27;]</span></span><br><span class="line">      keys.<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">`.edit-form .<span class="subst">$&#123;key&#125;</span>`</span>).<span class="property">value</span> = bookObj[key]</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">    editModal.<span class="title function_">show</span>()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 修改按钮-&gt;点击-&gt;隐藏弹框</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 4.3 提交保存修改，并刷新列表</span></span><br><span class="line">  <span class="keyword">const</span> editForm = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-form&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> &#123; id, bookname, author, publisher &#125; = <span class="title function_">serialize</span>(editForm, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span>&#125;)</span><br><span class="line">  <span class="comment">// 保存正在编辑的图书id，隐藏起来：无需让用户修改</span></span><br><span class="line">  <span class="comment">// &lt;input type=&quot;hidden&quot; class=&quot;id&quot; name=&quot;id&quot; value=&quot;84783&quot;&gt;</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">`http://hmajax.itheima.net/api/books/<span class="subst">$&#123;id&#125;</span>`</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;PUT&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      bookname,</span><br><span class="line">      author,</span><br><span class="line">      publisher,</span><br><span class="line">      creator</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 修改成功以后，重新获取并刷新列表</span></span><br><span class="line">    <span class="title function_">getBooksList</span>()</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 隐藏弹框</span></span><br><span class="line">    editModal.<span class="title function_">hide</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-6"><a href="#小结-6" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>编辑数据的步骤是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>获取正在编辑数据并回显，收集编辑表单的数据提交保存，重新获取并刷新列表</li>
</ul>
</details></li>
</ol>
<h2 id="10-案例-图书管理-总结"><a href="#10-案例-图书管理-总结" class="headerlink" title="10.案例_图书管理_总结"></a>10.案例_图书管理_总结</h2><h3 id="目标-7"><a href="#目标-7" class="headerlink" title="目标"></a>目标</h3><p>总结下增删改查的核心思路</p>
<h3 id="讲解-7"><a href="#讲解-7" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>因为增删改查的业务在前端实际开发中非常常见，思路是可以通用的，所以总结下思路</p>
<blockquote>
<p>1.渲染列表（查）</p>
<p>2.新增图书（增）</p>
<p>3.删除图书（删）</p>
<p>4.编辑图书（改）</p>
</blockquote>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404111941722.png"
                      alt="image-20230404111941722"
                ></p>
</li>
<li><p>渲染数据（查）</p>
<blockquote>
<p>核心思路：获取数据 -&gt; 渲染数据</p>
</blockquote>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1.1 获取数据</span></span><br><span class="line"><span class="title function_">axios</span>(&#123;...&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> bookList = result.<span class="property">data</span>.<span class="property">data</span></span><br><span class="line">  <span class="comment">// 1.2 渲染数据</span></span><br><span class="line">  <span class="keyword">const</span> htmlStr = bookList.<span class="title function_">map</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`&lt;tr&gt;</span></span><br><span class="line"><span class="string">    &lt;td&gt;<span class="subst">$&#123;index + <span class="number">1</span>&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">    &lt;td&gt;<span class="subst">$&#123;item.bookname&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">    &lt;td&gt;<span class="subst">$&#123;item.author&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">    &lt;td&gt;<span class="subst">$&#123;item.publisher&#125;</span>&lt;/td&gt;</span></span><br><span class="line"><span class="string">    &lt;td data-id=<span class="subst">$&#123;item.id&#125;</span>&gt;</span></span><br><span class="line"><span class="string">      &lt;span class=&quot;del&quot;&gt;删除&lt;/span&gt;</span></span><br><span class="line"><span class="string">      &lt;span class=&quot;edit&quot;&gt;编辑&lt;/span&gt;</span></span><br><span class="line"><span class="string">    &lt;/td&gt;</span></span><br><span class="line"><span class="string">  &lt;/tr&gt;`</span></span><br><span class="line">  &#125;).<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>)</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.list&#x27;</span>).<span class="property">innerHTML</span> = htmlStr</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div>


</li>
<li><p>新增数据（增）</p>
<blockquote>
<p>核心思路：准备页面标签 -&gt; 收集数据提交（必须） -&gt; 刷新页面列表（可选）</p>
</blockquote>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2.1 创建弹框对象</span></span><br><span class="line"><span class="keyword">const</span> addModalDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.add-modal&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> addModal = <span class="keyword">new</span> bootstrap.<span class="title class_">Modal</span>(addModalDom)</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.add-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 2.2 收集表单数据，并提交到服务器保存</span></span><br><span class="line">  <span class="keyword">const</span> addForm = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.add-form&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> bookObj = <span class="title function_">serialize</span>(addForm, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span> &#125;)</span><br><span class="line">  <span class="title function_">axios</span>(&#123;...&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 2.3 添加成功后，重新请求并渲染图书列表</span></span><br><span class="line">    <span class="title function_">getBooksList</span>()</span><br><span class="line">    addForm.<span class="title function_">reset</span>()</span><br><span class="line">    addModal.<span class="title function_">hide</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div>



<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404112942935.png"
                      alt="image-20230404112942935"
                ></p>
</li>
<li><p>删除图书（删）</p>
<blockquote>
<p>核心思路：绑定点击事件（获取要删除的图书唯一标识） -&gt; 调用删除接口（让服务器删除此数据） -&gt; 成功后重新获取并刷新列表</p>
</blockquote>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 3.1 删除元素-&gt;点击（事件委托）</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.list&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (e.<span class="property">target</span>.<span class="property">classList</span>.<span class="title function_">contains</span>(<span class="string">&#x27;del&#x27;</span>)) &#123;</span><br><span class="line">    <span class="comment">// 获取图书id（自定义属性id）</span></span><br><span class="line">    <span class="keyword">const</span> theId = e.<span class="property">target</span>.<span class="property">parentNode</span>.<span class="property">dataset</span>.<span class="property">id</span></span><br><span class="line">    <span class="comment">// 3.2 调用删除接口</span></span><br><span class="line">    <span class="title function_">axios</span>(&#123;...&#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// 3.3 刷新图书列表</span></span><br><span class="line">      <span class="title function_">getBooksList</span>()</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div>

<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404113338815.png"
                      alt="image-20230404113338815"
                ></p>
</li>
<li><p>编辑图书（改）</p>
<blockquote>
<p>核心思路：准备编辑图书表单 -&gt; 表单回显正在编辑的数据 -&gt; 点击修改收集数据 -&gt; 提交到服务器保存 -&gt; 重新获取并刷新列表</p>
</blockquote>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 4.1 编辑弹框-&gt;显示和隐藏</span></span><br><span class="line"><span class="keyword">const</span> editDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-modal&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> editModal = <span class="keyword">new</span> bootstrap.<span class="title class_">Modal</span>(editDom)</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.list&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (e.<span class="property">target</span>.<span class="property">classList</span>.<span class="title function_">contains</span>(<span class="string">&#x27;edit&#x27;</span>)) &#123;</span><br><span class="line">    <span class="comment">// 4.2 获取当前编辑图书数据-&gt;回显到编辑表单中</span></span><br><span class="line">    <span class="keyword">const</span> theId = e.<span class="property">target</span>.<span class="property">parentNode</span>.<span class="property">dataset</span>.<span class="property">id</span></span><br><span class="line">    <span class="title function_">axios</span>(&#123;...&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> bookObj = result.<span class="property">data</span>.<span class="property">data</span></span><br><span class="line">      <span class="comment">// 遍历数据对象，使用属性去获取对应的标签，快速赋值</span></span><br><span class="line">      <span class="keyword">const</span> keys = <span class="title class_">Object</span>.<span class="title function_">keys</span>(bookObj) </span><br><span class="line">      keys.<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">`.edit-form .<span class="subst">$&#123;key&#125;</span>`</span>).<span class="property">value</span> = bookObj[key]</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">    editModal.<span class="title function_">show</span>()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-btn&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 4.3 提交保存修改，并刷新列表</span></span><br><span class="line">  <span class="keyword">const</span> editForm = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.edit-form&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> &#123; id, bookname, author, publisher &#125; = <span class="title function_">serialize</span>(editForm, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span>&#125;)</span><br><span class="line">  <span class="comment">// 保存正在编辑的图书id，隐藏起来：无需让用户修改</span></span><br><span class="line">  <span class="comment">// &lt;input type=&quot;hidden&quot; class=&quot;id&quot; name=&quot;id&quot; value=&quot;84783&quot;&gt;</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;...&#125;).<span class="title function_">then</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">getBooksList</span>()</span><br><span class="line">    editModal.<span class="title function_">hide</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div>



<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404113702515.png"
                      alt="image-20230404113702515"
                ></p>
</li>
</ol>
<h3 id="小结-7"><a href="#小结-7" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>学完图书管理案例，我们收货了什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>现在编辑的虽然是图书数据，以后编辑其他数据，再做增删改查都是差不多的思路</li>
</ul>
</details></li>
</ol>
<h2 id="11-图片上传"><a href="#11-图片上传" class="headerlink" title="11.图片上传"></a>11.图片上传</h2><h3 id="目标-8"><a href="#目标-8" class="headerlink" title="目标"></a>目标</h3><p>把本地图片上传到网页上显示</p>
<h3 id="讲解-8"><a href="#讲解-8" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>什么是图片上传？</p>
<ul>
<li>就是把本地的图片上传到网页上显示</li>
</ul>
</li>
<li><p>图片上传怎么做？</p>
<ul>
<li>先依靠文件选择元素获取用户选择的本地文件，接着提交到服务器保存，服务器会返回图片的 url 网址，然后把网址加载到 img 标签的 src 属性中即可显示</li>
</ul>
</li>
<li><p>为什么不直接显示到浏览器上，要放到服务器上呢？</p>
<ul>
<li>因为浏览器保存是临时的，如果你想随时随地访问图片，需要上传到服务器上</li>
</ul>
</li>
<li><p>图片上传怎么做呢？</p>
<ol>
<li><p>先获取图片文件对象</p>
</li>
<li><p>使用 FormData 表单数据对象装入（因为图片是文件而不是以前的数字和字符串了所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递（可以查看请求体-确认请求体结构）</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fd = <span class="keyword">new</span> <span class="title class_">FormData</span>()</span><br><span class="line">fd.<span class="title function_">append</span>(参数名, 值)</span><br></pre></td></tr></table></figure></div></li>
<li><p>提交表单数据对象，使用服务器返回图片 url 网址</p>
</li>
</ol>
</li>
<li><p>核心代码如下：</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;IE=edge&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>图片上传<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 文件选择元素 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">class</span>=<span class="string">&quot;upload&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;my-img&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">/**</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     * 目标：图片上传，显示到网页上</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  1. 获取图片文件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  2. 使用 FormData 携带图片文件</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">     *  3. 提交到服务器，获取图片url网址使用</span></span></span><br><span class="line"><span class="comment"><span class="language-javascript">    */</span></span></span><br><span class="line"><span class="language-javascript">    <span class="comment">// 文件选择元素-&gt;change改变事件</span></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.upload&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 1. 获取图片文件</span></span></span><br><span class="line"><span class="language-javascript">      <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 2. 使用 FormData 携带图片文件</span></span></span><br><span class="line"><span class="language-javascript">      <span class="keyword">const</span> fd = <span class="keyword">new</span> <span class="title class_">FormData</span>()</span></span><br><span class="line"><span class="language-javascript">      fd.<span class="title function_">append</span>(<span class="string">&#x27;img&#x27;</span>, e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span></span><br><span class="line"><span class="language-javascript">      <span class="comment">// 3. 提交到服务器，获取图片url网址使用</span></span></span><br><span class="line"><span class="language-javascript">      <span class="title function_">axios</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/uploadimg&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">        <span class="attr">data</span>: fd</span></span><br><span class="line"><span class="language-javascript">      &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span></span><br><span class="line"><span class="language-javascript">        <span class="comment">// 取出图片url网址，用img标签加载显示</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> imgUrl = result.<span class="property">data</span>.<span class="property">data</span>.<span class="property">url</span></span></span><br><span class="line"><span class="language-javascript">        <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-img&#x27;</span>).<span class="property">src</span> = imgUrl</span></span><br><span class="line"><span class="language-javascript">      &#125;)</span></span><br><span class="line"><span class="language-javascript">    &#125;)</span></span><br><span class="line"><span class="language-javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-8"><a href="#小结-8" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>图片上传的思路是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>先用文件选择元素，获取到文件对象，然后装入 FormData 表单对象中，再发给服务器，得到图片在服务器的 URL 网址，再通过 img 标签加载图片显示</li>
</ul>
</details></li>
</ol>
<h2 id="12-案例-网站-更换背景图"><a href="#12-案例-网站-更换背景图" class="headerlink" title="12.案例_网站-更换背景图"></a>12.案例_网站-更换背景图</h2><h3 id="目标-9"><a href="#目标-9" class="headerlink" title="目标"></a>目标</h3><p>实现更换网站背景图的效果</p>
<h3 id="讲解-9"><a href="#讲解-9" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：先运行备课代码，查看要完成的效果，点击右上角选择本机中提供的素材图片，更换网站背景图</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404122349505.png"
                      alt="image-20230404122349505"
                ></p>
</li>
<li><p>网站更换背景图如何实现呢，并且保证刷新后背景图还在？具体步骤：</p>
<ol>
<li>先获取到用户选择的背景图片，上传并把服务器返回的图片 url 网址设置给 body 背景</li>
<li>上传成功时，保存图片 url 网址到 localStorage 中</li>
<li>网页运行后，获取 localStorage 中的图片的 url 网址使用（并判断本地有图片 url 网址字符串才设置）</li>
</ol>
</li>
<li><p>核心代码如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标：网站-更换背景</span></span><br><span class="line"><span class="comment"> *  1. 选择图片上传，设置body背景</span></span><br><span class="line"><span class="comment"> *  2. 上传成功时，&quot;保存&quot;图片url网址</span></span><br><span class="line"><span class="comment"> *  3. 网页运行后，&quot;获取&quot;url网址使用</span></span><br><span class="line"><span class="comment"> * */</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.bg-ipt&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 1. 选择图片上传，设置body背景</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span><br><span class="line">  <span class="keyword">const</span> fd = <span class="keyword">new</span> <span class="title class_">FormData</span>()</span><br><span class="line">  fd.<span class="title function_">append</span>(<span class="string">&#x27;img&#x27;</span>, e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/uploadimg&#x27;</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;POST&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: fd</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> imgUrl = result.<span class="property">data</span>.<span class="property">data</span>.<span class="property">url</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">backgroundImage</span> = <span class="string">`url(<span class="subst">$&#123;imgUrl&#125;</span>)`</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 2. 上传成功时，&quot;保存&quot;图片url网址</span></span><br><span class="line">    <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;bgImg&#x27;</span>, imgUrl)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 网页运行后，&quot;获取&quot;url网址使用</span></span><br><span class="line"><span class="keyword">const</span> bgUrl = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;bgImg&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(bgUrl)</span><br><span class="line">bgUrl &amp;&amp; (<span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span>.<span class="property">backgroundImage</span> = <span class="string">`url(<span class="subst">$&#123;bgUrl&#125;</span>)`</span>)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-9"><a href="#小结-9" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>localStorage 取值和赋值的语法分别是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>localStorage.getItem('key')是取值，localStorage.setItem('key', 'value')是赋值</li>
</ul>
</details></li>
</ol>
<h2 id="13-案例-个人信息设置-介绍"><a href="#13-案例-个人信息设置-介绍" class="headerlink" title="13.案例_个人信息设置-介绍"></a>13.案例_个人信息设置-介绍</h2><h3 id="目标-10"><a href="#目标-10" class="headerlink" title="目标"></a>目标</h3><p>介绍个人信息设置案例-需要完成哪些效果，分几个视频讲解</p>
<h3 id="讲解-10"><a href="#讲解-10" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：先运行备课代码，查看要完成的效果</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404123206073.png"
                      alt="image-20230404123206073"
                ></p>
</li>
<li><p>本视频分为，信息回显 + 头像修改 + 信息修改+ 提示框反馈 4 部分</p>
<ol>
<li>先完成信息回显</li>
<li>再做头像修改-立刻就更新给此用户</li>
<li>收集个人信息表单-提交保存</li>
<li>提交后反馈结果给用户（提示框）</li>
</ol>
</li>
</ol>
<h3 id="小结-10"><a href="#小结-10" class="headerlink" title="小结"></a>小结</h3><p>暂无</p>
<h2 id="14-案例-个人信息设置-信息渲染"><a href="#14-案例-个人信息设置-信息渲染" class="headerlink" title="14.案例_个人信息设置-信息渲染"></a>14.案例_个人信息设置-信息渲染</h2><h3 id="目标-11"><a href="#目标-11" class="headerlink" title="目标"></a>目标</h3><p>把外号对应的用户信息渲染到页面上</p>
<h3 id="讲解-11"><a href="#讲解-11" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：把外号对应的个人信息和头像，渲染到页面表单和头像标签上。</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404123708765.png"
                      alt="image-20230404123708765"
                ></p>
</li>
<li><p>注意：还是需要准备一个外号，因为想要查看自己对应的用户信息，不想被别人影响</p>
</li>
<li><p>步骤：</p>
<ul>
<li>获取数据</li>
<li>渲染数据到页面</li>
</ul>
</li>
<li><p>代码如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标1：信息渲染</span></span><br><span class="line"><span class="comment"> *  1.1 获取用户的数据</span></span><br><span class="line"><span class="comment"> *  1.2 回显数据到标签上</span></span><br><span class="line"><span class="comment"> * */</span></span><br><span class="line"><span class="keyword">const</span> creator = <span class="string">&#x27;播仔&#x27;</span></span><br><span class="line"><span class="comment">// 1.1 获取用户的数据</span></span><br><span class="line"><span class="title function_">axios</span>(&#123;</span><br><span class="line">  <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/settings&#x27;</span>,</span><br><span class="line">  <span class="attr">params</span>: &#123;</span><br><span class="line">    creator</span><br><span class="line">  &#125;</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> userObj = result.<span class="property">data</span>.<span class="property">data</span></span><br><span class="line">  <span class="comment">// 1.2 回显数据到标签上</span></span><br><span class="line">  <span class="title class_">Object</span>.<span class="title function_">keys</span>(userObj).<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (key === <span class="string">&#x27;avatar&#x27;</span>) &#123;</span><br><span class="line">      <span class="comment">// 赋予默认头像</span></span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.prew&#x27;</span>).<span class="property">src</span> = userObj[key]</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (key === <span class="string">&#x27;gender&#x27;</span>) &#123;</span><br><span class="line">      <span class="comment">// 赋予默认性别</span></span><br><span class="line">      <span class="comment">// 获取性别单选框：[男radio元素，女radio元素]</span></span><br><span class="line">      <span class="keyword">const</span> gRadioList = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;.gender&#x27;</span>)</span><br><span class="line">      <span class="comment">// 获取性别数字：0男，1女</span></span><br><span class="line">      <span class="keyword">const</span> gNum = userObj[key]</span><br><span class="line">      <span class="comment">// 通过性别数字，作为下标，找到对应性别单选框，设置选中状态</span></span><br><span class="line">      gRadioList[gNum].<span class="property">checked</span> = <span class="literal">true</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 赋予默认内容</span></span><br><span class="line">      <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">`.<span class="subst">$&#123;key&#125;</span>`</span>).<span class="property">value</span> = userObj[key]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-11"><a href="#小结-11" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>渲染数据和图书列表的渲染思路是否一样呢，是什么？</p>
<details>
<summary>答案</summary>
<ul>
<li>一样的，都是获取到数据，然后渲染到页面上</li>
</ul>
</details></li>
</ol>
<h2 id="15-案例-个人信息设置-头像修改"><a href="#15-案例-个人信息设置-头像修改" class="headerlink" title="15.案例_个人信息设置-头像修改"></a>15.案例_个人信息设置-头像修改</h2><h3 id="目标-12"><a href="#目标-12" class="headerlink" title="目标"></a>目标</h3><p>修改用户的头像并立刻生效</p>
<h3 id="讲解-12"><a href="#讲解-12" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：点击修改用户头像</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404124524401.png"
                      alt="image-20230404124524401"
                ></p>
</li>
<li><p>实现步骤如下：</p>
<ol>
<li><p>获取到用户选择的头像文件</p>
</li>
<li><p>调用头像修改接口，并除了头像文件外，还要在 FormData 表单数据对象中携带外号</p>
</li>
<li><p>提交到服务器保存此用户对应头像文件，并把返回的头像图片 url 网址设置在页面上</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404124540629.png"
                      alt="image-20230404124540629"
                ></p>
</li>
</ol>
</li>
<li><p>注意：重新刷新重新获取，已经是修改后的头像了（证明服务器那边确实保存成功）</p>
</li>
<li><p>核心代码：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标2：修改头像</span></span><br><span class="line"><span class="comment"> *  2.1 获取头像文件</span></span><br><span class="line"><span class="comment"> *  2.2 提交服务器并更新头像</span></span><br><span class="line"><span class="comment"> * */</span></span><br><span class="line"><span class="comment">// 文件选择元素-&gt;change事件</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.upload&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 2.1 获取头像文件</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span><br><span class="line">  <span class="keyword">const</span> fd = <span class="keyword">new</span> <span class="title class_">FormData</span>()</span><br><span class="line">  fd.<span class="title function_">append</span>(<span class="string">&#x27;avatar&#x27;</span>, e.<span class="property">target</span>.<span class="property">files</span>[<span class="number">0</span>])</span><br><span class="line">  fd.<span class="title function_">append</span>(<span class="string">&#x27;creator&#x27;</span>, creator)</span><br><span class="line">  <span class="comment">// 2.2 提交服务器并更新头像</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/avatar&#x27;</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;PUT&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: fd</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> imgUrl = result.<span class="property">data</span>.<span class="property">data</span>.<span class="property">avatar</span></span><br><span class="line">    <span class="comment">// 把新的头像回显到页面上</span></span><br><span class="line">    <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.prew&#x27;</span>).<span class="property">src</span> = imgUrl</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-12"><a href="#小结-12" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>为什么这次上传头像，需要携带外号呢？</p>
<details>
<summary>答案</summary>
<ul>
<li>因为这次头像到后端，是要保存在某个用户名下的，所以要把外号名字一起携带过去</li>
</ul>
</details></li>
</ol>
<h2 id="16-案例-个人信息设置-信息修改"><a href="#16-案例-个人信息设置-信息修改" class="headerlink" title="16.案例_个人信息设置-信息修改"></a>16.案例_个人信息设置-信息修改</h2><h3 id="目标-13"><a href="#目标-13" class="headerlink" title="目标"></a>目标</h3><p>把用户修改的信息提交到服务器保存</p>
<h3 id="讲解-13"><a href="#讲解-13" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：点击提交按钮，收集个人信息，提交到服务器保存（无需重新获取刷新，因为页面已经是最新的数据了）</p>
<ol>
<li><p>收集表单数据</p>
</li>
<li><p>提交到服务器保存-调用用户信息更新接口（注意请求方法是 PUT）代表数据更新的意思</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404125310049.png"
                      alt="image-20230404125310049"
                ></p>
</li>
</ol>
</li>
<li><p>核心代码如下：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标3：提交表单</span></span><br><span class="line"><span class="comment"> *  3.1 收集表单信息</span></span><br><span class="line"><span class="comment"> *  3.2 提交到服务器保存</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 保存修改-&gt;点击</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.submit&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 3.1 收集表单信息</span></span><br><span class="line">  <span class="keyword">const</span> userForm = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.user-form&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> userObj = <span class="title function_">serialize</span>(userForm, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span> &#125;)</span><br><span class="line">  userObj.<span class="property">creator</span> = creator</span><br><span class="line">  <span class="comment">// 性别数字字符串，转成数字类型</span></span><br><span class="line">  userObj.<span class="property">gender</span> = +userObj.<span class="property">gender</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(userObj)</span><br><span class="line">  <span class="comment">// 3.2 提交到服务器保存</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/settings&#x27;</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;PUT&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: userObj</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-13"><a href="#小结-13" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>信息修改数据和以前增删改查哪个实现的思路比较接近呢？</p>
<details>
<summary>答案</summary>
<ul>
<li>编辑，首先回显已经做完了，然后收集用户最新改动后的数据，提交到服务器保存，因为页面最终就是用户刚写的数据，所以不用重新获取并刷新页面了</li>
</ul>
</details></li>
</ol>
<h2 id="17-案例-个人信息设置-提示框"><a href="#17-案例-个人信息设置-提示框" class="headerlink" title="17.案例_个人信息设置-提示框"></a>17.案例_个人信息设置-提示框</h2><h3 id="目标-14"><a href="#目标-14" class="headerlink" title="目标"></a>目标</h3><p>把用户更新个人信息结果，用提示框反馈给用户</p>
<h3 id="讲解-14"><a href="#讲解-14" class="headerlink" title="讲解"></a>讲解</h3><ol>
<li><p>需求：使用 bootstrap 提示框，提示个人信息设置后的结果</p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="/../images/Ajax-2/image-20230404125517679.png"
                      alt="image-20230404125517679"
                ></p>
</li>
<li><p>bootstrap 的 toast 提示框和 modal 弹框使用很像，语法如下：</p>
<ol>
<li><p>先准备对应的标签结构（模板里已有）</p>
</li>
<li><p>设置延迟自动消失的时间</p>
<div class="highlight-container" data-rel="Html"><figure class="iseeu highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;toast&quot;</span> <span class="attr">data-bs-delay</span>=<span class="string">&quot;1500&quot;</span>&gt;</span></span><br><span class="line">  提示框内容</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></div>
</li>
<li><p>使用 JS 的方式，在 axios 请求响应成功时，展示结果</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建提示框对象</span></span><br><span class="line"><span class="keyword">const</span> toastDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;css选择器&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> toast = <span class="keyword">new</span> bootstrap.<span class="title class_">Toast</span>(toastDom)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 显示提示框</span></span><br><span class="line">toast.<span class="title function_">show</span>()</span><br></pre></td></tr></table></figure></div></li>
</ol>
</li>
<li><p>核心代码：</p>
<div class="highlight-container" data-rel="Js"><figure class="iseeu highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标3：提交表单</span></span><br><span class="line"><span class="comment"> *  3.1 收集表单信息</span></span><br><span class="line"><span class="comment"> *  3.2 提交到服务器保存</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目标4：结果提示</span></span><br><span class="line"><span class="comment"> *  4.1 创建toast对象</span></span><br><span class="line"><span class="comment"> *  4.2 调用show方法-&gt;显示提示框</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 保存修改-&gt;点击</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.submit&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 3.1 收集表单信息</span></span><br><span class="line">  <span class="keyword">const</span> userForm = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.user-form&#x27;</span>)</span><br><span class="line">  <span class="keyword">const</span> userObj = <span class="title function_">serialize</span>(userForm, &#123; <span class="attr">hash</span>: <span class="literal">true</span>, <span class="attr">empty</span>: <span class="literal">true</span> &#125;)</span><br><span class="line">  userObj.<span class="property">creator</span> = creator</span><br><span class="line">  <span class="comment">// 性别数字字符串，转成数字类型</span></span><br><span class="line">  userObj.<span class="property">gender</span> = +userObj.<span class="property">gender</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(userObj)</span><br><span class="line">  <span class="comment">// 3.2 提交到服务器保存</span></span><br><span class="line">  <span class="title function_">axios</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: <span class="string">&#x27;http://hmajax.itheima.net/api/settings&#x27;</span>,</span><br><span class="line">    <span class="attr">method</span>: <span class="string">&#x27;PUT&#x27;</span>,</span><br><span class="line">    <span class="attr">data</span>: userObj</span><br><span class="line">  &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 4.1 创建toast对象</span></span><br><span class="line">    <span class="keyword">const</span> toastDom = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.my-toast&#x27;</span>)</span><br><span class="line">    <span class="keyword">const</span> toast = <span class="keyword">new</span> bootstrap.<span class="title class_">Toast</span>(toastDom)</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 4.2 调用show方法-&gt;显示提示框</span></span><br><span class="line">    toast.<span class="title function_">show</span>()</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div></li>
</ol>
<h3 id="小结-14"><a href="#小结-14" class="headerlink" title="小结"></a>小结</h3><ol>
<li><p>bootstrap 弹框什么时候用 JS 方式控制显示呢？</p>
<details>
<summary>答案</summary>
<ul>
<li>需要执行一些其他的 JS 逻辑后，再去显示/隐藏弹框时</li>
</ul>
</details></li>
</ol>
<h2 id="今日重点-必须会"><a href="#今日重点-必须会" class="headerlink" title="今日重点(必须会)"></a>今日重点(必须会)</h2><ol>
<li>掌握增删改查数据的思路</li>
<li>掌握图片上传的思路和流程</li>
<li>理解调用接口时，携带外号的作用</li>
<li>了解 bootstrap 弹框的使用</li>
</ol>
<h2 id="今日作业-必完成"><a href="#今日作业-必完成" class="headerlink" title="今日作业(必完成)"></a>今日作业(必完成)</h2><p>在配套作业文件夹的md内</p>
<h2 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h2><ol>
<li><a class="link"   target="_blank" rel="noopener" href="https://baike.baidu.com/item/%E8%A1%A8%E5%8D%95" >表单概念-&gt;百度百科 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values" >accept属性-&gt;mdn <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.runoob.com/tags/att-input-accept.html" >accept属性-&gt;菜鸟教程 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/FormData" >FormData-&gt;mdn <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://v5.bootcss.com/docs/components/modal/#passing-options" >BS的Model文档 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
<li><a class="link"   target="_blank" rel="noopener" href="https://www.axios-http.cn/docs/api_intro" >axios请求方式别名 <i class="fa-regular fa-arrow-up-right-from-square fa-sm"></i></a></li>
</ol>

        </div>

        
            <div class="post-copyright-info w-full my-8 px-2 sm:px-6 md:px-8">
                <div class="article-copyright-info-container">
    <ul>
        <li><strong>Title:</strong> Ajax综合案例</li>
        <li><strong>Author:</strong> 星纪</li>
        <li><strong>Created at
                :</strong> 2024-01-21 19:33:33</li>
        
            <li>
                <strong>Updated at
                    :</strong> 2024-01-24 15:03:00
            </li>
        
        <li>
            <strong>Link:</strong> https://redefine.ohevan.com/2024/01/21/Day02_AJAX综合案例/
        </li>
        <li>
            <strong>
                License:
            </strong>
            

            
                This work is licensed under <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0">CC BY-NC-SA 4.0</a>.
            
        </li>
    </ul>
</div>

            </div>
        

        

        

        
            <div class="article-nav my-8 flex justify-between items-center px-2 sm:px-6 md:px-8">
                
                    <div class="article-prev border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2">
                        <a class="prev"
                        rel="prev"
                        href="/2024/01/21/Day01_AJAX%E5%85%A5%E9%97%A8/"
                        >
                            <span class="left arrow-icon flex justify-center items-center">
                                <i class="fa-solid fa-chevron-left"></i>
                            </span>
                            <span class="title flex justify-center items-center">
                                <span class="post-nav-title-item">Ajax入门</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2">
                        <a class="next"
                        rel="next"
                        href="/2024/01/10/hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"
                        >
                            <span class="title flex justify-center items-center">
                                <span class="post-nav-title-item">Hexo搭建博客</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex justify-center items-center">
                                <i class="fa-solid fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        


        
            <div class="comment-container px-2 sm:px-6 md:px-8 pb-8">
                <div class="comments-container mt-10 w-full ">
    <div id="comment-anchor" class="w-full h-2.5"></div>
    <div class="comment-area-title w-full my-1.5 md:my-2.5 text-xl md:text-3xl font-bold">
        Comments
    </div>
    

        
            
    <div id="waline"></div>
    <script type="module" data-swup-reload-script>
      import { init } from '/js/libs/waline.mjs';

      function loadWaline() {
        init({
          el: '#waline',
          serverURL: 'https://example.example.com',
          lang: 'zh-CN',
          dark: 'body[class~="dark-mode"]',
          requiredMeta: ['nick', 'mail'],
          emoji: [],
          recaptchaV3Key: "wasd",
          
        });
      }

      if (typeof swup !== 'undefined') {
        loadWaline();
      } else {
        window.addEventListener('DOMContentLoaded', loadWaline);
      }
    </script>



        
    
</div>

            </div>
        
    </div>

    
        <div class="toc-content-container">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <div class="toc-title">On this page</div>
        <div class="page-title">Ajax综合案例</div>
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Day02-AJAX%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B"><span class="nav-text">Day02_AJAX综合案例</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9F%A5%E8%AF%86%E7%82%B9%E8%87%AA%E6%B5%8B"><span class="nav-text">知识点自测</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9B%AE%E5%BD%95"><span class="nav-text">目录</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E7%9B%AE%E6%A0%87"><span class="nav-text">学习目标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#01-%E6%A1%88%E4%BE%8B-%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-%E4%BB%8B%E7%BB%8D"><span class="nav-text">01.案例_图书管理-介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#02-Bootstrap-%E5%BC%B9%E6%A1%86-%E5%B1%9E%E6%80%A7%E6%8E%A7%E5%88%B6"><span class="nav-text">02.Bootstrap 弹框_属性控制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-1"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-1"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-1"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#03-Bootstrap-%E5%BC%B9%E6%A1%86-JS%E6%8E%A7%E5%88%B6"><span class="nav-text">03.Bootstrap 弹框_JS控制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-2"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-2"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-2"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#04-%E6%A1%88%E4%BE%8B-%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-%E6%B8%B2%E6%9F%93%E5%88%97%E8%A1%A8"><span class="nav-text">04.案例_图书管理_渲染列表</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-3"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-3"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-3"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#05-%E6%A1%88%E4%BE%8B-%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-%E6%96%B0%E5%A2%9E%E5%9B%BE%E4%B9%A6"><span class="nav-text">05.案例_图书管理_新增图书</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-4"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-4"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-4"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#06-%E6%A1%88%E4%BE%8B-%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-%E5%88%A0%E9%99%A4%E5%9B%BE%E4%B9%A6"><span class="nav-text">06.案例_图书管理_删除图书</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-5"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-5"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-5"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#07-09-%E6%A1%88%E4%BE%8B-%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-%E7%BC%96%E8%BE%91%E5%9B%BE%E4%B9%A6"><span class="nav-text">07-09.案例_图书管理_编辑图书</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-6"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-6"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-6"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10-%E6%A1%88%E4%BE%8B-%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-%E6%80%BB%E7%BB%93"><span class="nav-text">10.案例_图书管理_总结</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-7"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-7"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-7"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11-%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0"><span class="nav-text">11.图片上传</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-8"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-8"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-8"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#12-%E6%A1%88%E4%BE%8B-%E7%BD%91%E7%AB%99-%E6%9B%B4%E6%8D%A2%E8%83%8C%E6%99%AF%E5%9B%BE"><span class="nav-text">12.案例_网站-更换背景图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-9"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-9"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-9"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#13-%E6%A1%88%E4%BE%8B-%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE-%E4%BB%8B%E7%BB%8D"><span class="nav-text">13.案例_个人信息设置-介绍</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-10"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-10"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-10"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#14-%E6%A1%88%E4%BE%8B-%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE-%E4%BF%A1%E6%81%AF%E6%B8%B2%E6%9F%93"><span class="nav-text">14.案例_个人信息设置-信息渲染</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-11"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-11"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-11"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#15-%E6%A1%88%E4%BE%8B-%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE-%E5%A4%B4%E5%83%8F%E4%BF%AE%E6%94%B9"><span class="nav-text">15.案例_个人信息设置-头像修改</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-12"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-12"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-12"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#16-%E6%A1%88%E4%BE%8B-%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE-%E4%BF%A1%E6%81%AF%E4%BF%AE%E6%94%B9"><span class="nav-text">16.案例_个人信息设置-信息修改</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-13"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-13"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-13"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#17-%E6%A1%88%E4%BE%8B-%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF%E8%AE%BE%E7%BD%AE-%E6%8F%90%E7%A4%BA%E6%A1%86"><span class="nav-text">17.案例_个人信息设置-提示框</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%AE%E6%A0%87-14"><span class="nav-text">目标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AE%B2%E8%A7%A3-14"><span class="nav-text">讲解</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B0%8F%E7%BB%93-14"><span class="nav-text">小结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8A%E6%97%A5%E9%87%8D%E7%82%B9-%E5%BF%85%E9%A1%BB%E4%BC%9A"><span class="nav-text">今日重点(必须会)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%8A%E6%97%A5%E4%BD%9C%E4%B8%9A-%E5%BF%85%E5%AE%8C%E6%88%90"><span class="nav-text">今日作业(必完成)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="nav-text">参考文献</span></a></li></ol></li></ol>

    </div>
</div>
        </div>
    
</div>



                

            </div>

            

        </div>

        <div class="main-content-footer">
            <footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color">
    <div class="info-container py-3 text-center">
        
        <div class="text-center">
            &copy;
            
              <span>2022</span>
              -
            
            2024&nbsp;&nbsp;<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>&nbsp;&nbsp;<a href="/">星纪</a>
        </div>
        
            <script data-swup-reload-script src="https://cn.vercount.one/js"></script>
            <div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right">
                
                    <span id="busuanzi_container_site_uv" class="lg:!block">
                        <span class="text-sm">VISITOR COUNT</span>
                        <span id="busuanzi_value_site_uv"></span>
                    </span>
                
                
                    <span id="busuanzi_container_site_pv" class="lg:!block">
                        <span class="text-sm">TOTAL PAGE VIEWS</span>
                        <span id="busuanzi_value_site_pv"></span>
                    </span>
                
            </div>
        
        <div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left">
            <span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span>
            <span class="text-sm lg:block">THEME&nbsp;<a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.6.0</a></span>
        </div>
        
        
            <div>
                Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec
            </div>
        
        
            <script data-swup-reload-script>
                try {
                    function odometer_init() {
                    const elements = document.querySelectorAll('.odometer');
                    elements.forEach(el => {
                        new Odometer({
                            el,
                            format: '( ddd).dd',
                            duration: 200
                        });
                    });
                    }
                    odometer_init();
                } catch (error) {}
            </script>
        
        
        
    </div>  
</footer>
        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="article-tools-list">
        <!-- TOC aside toggle -->
        
            <li class="right-bottom-tools page-aside-toggle">
                <i class="fa-regular fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fa-regular fa-comments"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-side-tools-container">
        <div class="side-tools-container">
    <ul class="hidden-tools-list">
        <li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center">
            <i class="fa-regular fa-magnifying-glass-plus"></i>
        </li>

        <li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center">
            <i class="fa-regular fa-magnifying-glass-minus"></i>
        </li>

        <li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center">
            <i class="fa-regular fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center">
            <i class="fa-regular fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="visible-tools-list">
        <li class="right-bottom-tools toggle-tools-list flex justify-center items-center">
            <i class="fa-regular fa-cog fa-spin"></i>
        </li>
        
            <li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
        
    </ul>
</div>

    </div>

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>


    
<script src="/js/libs/Swup.min.js"></script>

<script src="/js/libs/SwupSlideTheme.min.js"></script>

<script src="/js/libs/SwupScriptsPlugin.min.js"></script>

<script src="/js/libs/SwupProgressPlugin.min.js"></script>

<script src="/js/libs/SwupScrollPlugin.min.js"></script>

<script src="/js/libs/SwupPreloadPlugin.min.js"></script>

<script>
    const swup = new Swup({
        plugins: [
            new SwupScriptsPlugin({
                optin: true,
            }),
            new SwupProgressPlugin(),
            new SwupScrollPlugin({
                offset: 80,
            }),
            new SwupSlideTheme({
                mainElement: ".main-content-body",
            }),
            new SwupPreloadPlugin(),
        ],
        containers: ["#swup"],
    });
</script>







<script src="/js/tools/imageViewer.js" type="module"></script>

<script src="/js/utils.js" type="module"></script>

<script src="/js/main.js" type="module"></script>

<script src="/js/layouts/navbarShrink.js" type="module"></script>

<script src="/js/tools/scrollTopBottom.js" type="module"></script>

<script src="/js/tools/lightDarkSwitch.js" type="module"></script>

<script src="/js/layouts/categoryList.js" type="module"></script>





    
<script src="/js/tools/codeBlock.js" type="module"></script>




    
<script src="/js/layouts/lazyload.js" type="module"></script>




    
<script src="/js/tools/runtime.js"></script>

    
<script src="/js/libs/odometer.min.js"></script>

    
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">




  
<script src="/js/libs/Typed.min.js"></script>

  
<script src="/js/plugins/typed.js" type="module"></script>









<div class="post-scripts" data-swup-reload-script>
    
        
<script src="/js/tools/tocToggle.js" type="module"></script>

<script src="/js/layouts/toc.js" type="module"></script>

<script src="/js/plugins/tabs.js" type="module"></script>

    
</div>


</body>
</html>
